<template>
    <view class="checkinfo_contain">
        <view v-if="!isOver">
            <view class="header">
                <nut-steps :current="active + 1">
                    <nut-step v-for="(item, idx) in arrStep" :key="idx + 1" :title="item">
                        {{ idx + 1 }}
                        <template #title>{{ item }}</template>
                    </nut-step>
                </nut-steps>
            </view>

            <view class="title">
                <image class="image" :src="require(`@/assets/images/images/${arrImg[active]}`)" />
                <view class="content">
                    <h3 style="line-height: 48rpx;">{{ arrTitle[active] }}<span> <a style="color: #0966FF;">{{ active + 1
                    }}</a>/3</span></h3>
                    <p>{{ arrContent[active] }}</p>
                </view>
            </view>

            <view class="order" v-show="active === 0">
                <view class="order_herder">
                    <image class="logo" src="@/assets/images/images/querendingdan_logo.png" />
                    <span>
                        <image src="@/assets/images/images/querendingdan_icon_dianhua.png" />客服热线：952999
                    </span>
                </view>

                <view class="order_body">
                    <view class="scan">
                        <image src="@/assets/images/images/条形码(1)1.png" />
                        <view class="order_address">
                            <h3>{{ orderInfo.startBranchName }}</h3>
                            <p>始发地</p>
                            <h3 style="margin-top: calc(12vw / 3.75);">{{ orderInfo.destinationBranchName }}</h3>
                            <p>目的地</p>
                        </view>
                    </view>
                    <view class="order_userInfo">
                        <view class="send">
                            <image src="@/assets/images/images/querendingdan_icon_fahuoren.png" />
                            <view class="info">
                                <h3><span>{{ orderInfo.shipper }}</span>{{
                                    orderInfo.shipperMobile ? orderInfo.shipperMobile : orderInfo.shipperTel }}</h3>
                                <p>{{ orderInfo.fromAdd }}</p>
                            </view>
                        </view>
                        <view class="get">
                            <image src="@/assets/images/images/querendingdan_icon_shouhuoren.png" />
                            <view class="info">
                                <h3><span>{{ orderInfo.receiver }}</span>{{
                                    orderInfo.receiverMobile ? orderInfo.receiverMobile : orderInfo.receiverTel }}</h3>
                                <p>{{ orderInfo.toFromAdd }}</p>
                            </view>
                        </view>
                    </view>
                    <view class="order_spec" v-for="(item, index) in orderInfo.goodsInfo" :key="index">
                        <view>
                            <p>货物名称：<span>{{ item.goodsName }}</span></p>
                        </view>
                        <view>
                            <p>规格：<span>{{ item.specifications }}</span></p>
                        </view>
                        <view>
                            <p>件数：<span>{{ item.goodsNumber }}件</span></p>&nbsp;
                            <p>包装：<span>{{ item.packing }}</span></p>
                        </view>
                        <view>
                            <p>重量：<span>{{ item.weigh }}kg</span></p>&nbsp;
                            <p>体积：<span>{{ item.goodsVolume }}m³</span></p>
                        </view>
                    </view>
                    <view class="service">
                        <p>综合服务费: <span>￥{{ orderInfo.serveFee ? orderInfo.serveFee : 0 }}</span></p>
                        <view class="service_info">
                            <p>干线服务：<span>￥{{ 0 }}</span>仓储服务：<span>￥{{ 0 }}</span></p>
                            <p class="noflex">场内装卸服务：<span style="margin-left: calc(20vw / 3.75);">￥{{ 0 }}</span></p>
                        </view>
                        <p class="flex">其他:<span>{{ orderInfo.other ? orderInfo.other : '无' }}</span>费用合计：<span>￥{{
                            orderInfo.serveFee ? orderInfo.serveFee : 0 }}</span>
                        </p>
                    </view>
                    <view class="order_spec">
                        <view>
                            <p>保价声明价值：<span>￥{{ orderInfo.insuredMoney }}</span></p>
                            <p>是否附带单据：<span>{{ orderInfo.backReceiptSigninStaus ? '是' : '否' }}</span></p>
                        </view>
                        <view>
                            <!-- <p>代收货款：<span>{{ orderInfo.collectionMoney ? `￥` orderInfo.collectionMoney `元` : '不代收货款' }}</span></p> -->
                            <p>收款人：<span>{{ orderInfo.getCoster }}</span></p>
                        </view>
                        <view>
                            <p>返款类型：<span>{{ getReturnType(orderInfo.returnType) }}</span></p>
                        </view>
                        <view>
                            <p>会员卡号：<span>{{ orderInfo.vipNo }}</span></p>
                        </view>
                    </view>
                    <view class="order_spec">
                        <view>
                            <p>运输类型：<span>{{ orderInfo.sendType }}</span></p>
                            <p>提货方式：<span>{{ getPickMode(orderInfo.pickUpMode) }}</span></p>
                        </view>
                        <view>
                            <p>结算方式：<span>{{ getClearForm(orderInfo.clearingForm) }}</span></p>
                            <p>结算地：<span>{{ orderInfo.clearAdd }}</span></p>
                        </view>
                        <view>
                            <p>签单单位：<span>{{ orderInfo.customerName }}</span></p>
                        </view>
                    </view>
                    <view class="order_spec">
                        <view>
                            <p>录单员：<span>{{ orderInfo.recorderName }}</span></p>
                            <p>开单员：<span>{{ orderInfo.billerName }}</span></p>
                        </view>
                        <view>
                            <p>接单员：<span>{{ orderInfo.takerName }}</span></p>
                            <p>备注：<span>{{ orderInfo.remarks }}</span></p>
                        </view>
                        <view>
                            <p>日期时间：<span>{{ orderInfo.updateTime }}</span></p>
                        </view>
                    </view>
                </view>
            </view>

            <view class="tips" v-show="active === 1">
                <h3>《承运单特别约定》</h3>
                <p>1、托运人应如实告知承运人所托运货物的品名、数量、规格、性质、价值等必要信息和清楚填写收货人信息，准确申报、认真核对承运单信息，对承运单所填写内容之真实性负责。若因托运人所提供的收货人信息等错误造成交货延迟或损失的，承运人不承担任何责任。
                </p>
                <p>2、托运人托运的货物必须符合国家有关运输规定。不得在所托运的货物中夹带国家禁止或限制运输的物品（包含但不仅限于假冒伪劣产品、危险品、违禁品），不得隐瞒或夹带承运单所填报货物名称之外的物品。否则因此发生人员伤亡、财产损失的由托运人承担一切刑事责任、行政责任、民事赔偿责任，并由托运人赔偿承运人因此造成的一切损失。
                </p>
                <p>3、收货人在收到提货或送货通知后最迟应在3日内提货或安排接收货物；逾期应支付超出天数的仓储费和保管费，轻货按照5元/m³/天收取，重货按照15元/T/天收取，两者相比取较大值作为收费标准，最低5元每票。凡逾期30日的，承运人有权视情对货物进行处理，因此产生的损失承运人不承担赔偿责任。
                </p>
                <p>4、托运人或收货人无故不支付费用的，承运人可以对承运货物行使留置权及其他补救性权利，因此产生的后果由托运人或收货人承担。</p>
                <p>5、托运人有权选择办理货物保价运输，保价费按货物价值的0.4%收取，最低5元每票。托运人选择保价运输的，货物全部毁损或灭失，按货物保价声明价值赔偿；货物部分毁损或灭失，按货物保价声明价值的损失比例赔偿；声明价值高于实际价值的，按实际价值赔偿；若货物损坏进行修复的，按实际修复费进行赔偿。托运易碎品托运人应进行有效防护性包装，若运输途中发生破损，除能证明该破损系承运人造成包装物破坏致使托运货物损坏外，承运人不承担赔偿责任。
                </p>
                <p>6、未办理保价运输而发生货物灭失或损坏，每件货物价值在300元以内的，按货物实际损失赔偿；每件货物价值超过300元的，承运人对每件货物的最高赔偿额不超过300元。</p>
                <p>7、托运人委托承运人代收货款不代表该次货物的实际价值，如果承运货物出现损坏或灭失的赔偿额应按照本承运单特别约定赔偿，与代收货款无关。</p>
                <p>8、收货人签收货物后，表明货物已完好无损交付，自签收之时起该货物的损坏、短缺、灭失、污染、变质等一切风险和责任转移至收货人处，与承运人无关。</p>
                <p>9、托运人与承运人约定：凡因本承运单或与承运单有关的争议，由福州市晋安区人民法院管辖。</p>
                <p>10、本承运单于托运人和承运人双方签章之时起生效。</p>
                <a class="agree">本人同意《承运单特别约定》</a>

                <view v-if="orderStore.imgUrl" @click="goSign">
                    <image :src="orderStore.imgUrl" class="hand_img" />
                </view>
                <view v-else class="sign" @click="goSign">
                    点击此处，签字同意
                </view>
            </view>

            <view class="message" v-show="active === 2">
                <p>已发送验证码至<span>17671874972</span>，请输入</p>
                <!-- 密码输入框 -->
                <nut-input input-align="center" class="captcha" type="number" v-model="captcha" max-length="6"></nut-input>

                <p class="error" v-if="num > 0 && errCheck"><span class="sec">{{ num }}</span> 秒后重新获取验证码</p>
                <p class="error" v-else-if="num <= 0 && errCheck"><span class="sec" @click="reget">重新获取</span></p>
                <p class="error err" v-else-if="num <= 0 && !errCheck">验证码错误或失效，请重新输入或<span class="sec"
                        @click="reget">重新获取</span></p>
                <p class="error err" v-else-if="num >= 0 && !errCheck">验证码错误或失效，请重新输入或<span class="sec">{{ num }}</span>
                    秒后重新获取验证码</p>
            </view>

            <view class="footer">
                <view class="cancel" @click="doCancel">{{ active === 0 ? '取消' : '上一步' }}</view>

                <view v-if="active === 2" :class="[captcha.length === 6 ? 'click' : 'disabled']" @click="submit">完成
                </view>
                <view v-else :class="[active === 1 && !orderStore.imgUrl ? 'disabled' : 'click']" @click="doClick">
                    {{ active === 1 && !orderStore.imgUrl ? '请先签名' : '下一步' }}
                </view>
            </view>
        </view>

        <view v-else class="over">
            <image src="@/assets/images/images/icon_wancheng@2x.png" />
            <h3>恭喜您，完成全部流程</h3>
            <p>感谢您对盛辉物流的支持~</p>
        </view>
    </view>
</template>
  
<script lang="ts" setup>
import { getOrderInfo, getCodeNum } from '@/@api/order'
import { OrderListType } from '@/type'
import Taro from '@tarojs/taro'
import dayjs from 'dayjs' 
import { ref } from 'vue'
import useOrderStore from '@/store/order'
import useUserStore from '@/store/user'
import { shBaseUrl } from '@/@api/urls'

const orderStore = useOrderStore()
const userStore = useUserStore()

const arrStep = ['确认订单', '阅读条款', '短信验证']
const arrTitle = ['预览电子承运单', '阅读《承运单特别条约》', '短信验证']
const arrContent = ['请您预览电子承运单，并检查电子承运单上的信息是否有误。', '请您仔细阅读《承运单特别条约》，并在文本最下方的签名栏签字同意。', '请您将收到的短信验证码填入下方的输入框中，并点击“完成”。']
const arrImg = ['duanxingyanzhen_icon_3.png', 'querendingdan_icon_2.png', 'yuedutiaokuan_icon_1.png']
const active = ref(0)
const timer = ref(true) //定时器判断
const num = ref(10) //倒计时
const time = ref() //定时器
const orderInfo = ref<any>({})  //运单数据
const isOver = ref(false)
const captcha = ref('') //验证码

const errCheck = ref(true) //错误检查

async function init() {
    const res = await getOrderInfo('520520520')
    orderInfo.value = res.data.rows[0]
    orderInfo.value.updateTime = dayjs(orderInfo.value.updateTime).format('YYYY-MM-DD HH:mm:ss')
}
init()

// 进度条未完成
function doClick() {
    if (active.value === 1 && !orderStore.imgUrl) {
        return Taro.showToast({
            icon: 'error',
            title: '请先签名'
        })
    }
    active.value++

    if (active.value === 2 && timer.value) {
        num.value = 60
        clearInterval(time.value)
        // 发送请求
        getVerify()
        time.value = setInterval(() => {
            num.value--
            if (num.value < 0) {
                clearInterval(time.value)
            }
        }, 1000)
        timer.value = false
    }
}

// 重新获取验证码
function reget() {
    errCheck.value = true
    num.value = 60
    clearInterval(time.value)
    // 发送请求
    getVerify()
    time.value = setInterval(() => {
        num.value--
        if (num.value < 0) {
            clearInterval(time.value)
        }
    }, 1000)
    timer.value = false
}

// 回退/取消
function doCancel() {
    if (active.value > 0) {
        active.value--
    } else {
        Taro.navigateBack()
    }
}
// 提交
async function submit() {
    if (captcha.value.length === 6) {

        let params = {
            billNo: 520520520,
            isConfirm: true,
            smsVerification: captcha.value,
        }
        // 图片上传
        Taro.uploadFile({
            url: shBaseUrl + `/selfmachine-system/workerOrder/signPicUpload?billNo=${params.billNo}&isConfirm=${params.isConfirm}&smsVerification=${params.smsVerification}`,
            // + orderStore.orderInfo.billNo,
            filePath: orderStore.imgUrl,
            header: {
                "Content-Type": "multipart/form-data",
                Authorization: userStore.token,
            },
            name: 'file',
            success(res) {
                if (JSON.parse(res.data).code === 500) {
                    errCheck.value = false
                } else {
                    captcha.value = ''
                    errCheck.value = false
                    // 初始化
                    isOver.value = true
                }
            }
        })
    }
}
// 签名
function goSign() {
    Taro.navigateTo({
        url: '../handWrite/index'
    })
}
// 返款类型
function getReturnType(val: string) {
    if (val === '1') {
        return '会员'
    } else if (val === '2') {
        return '银行卡'
    } else if (val === '3') {
        return '微信'
    } else {
        return ''
    }
}
// 送货类型
function getPickMode(val: string) {
    if (val === '1') {
        return '自提'
    } else if (val === '2') {
        return '送货'
    } else if (val === '3') {
        return '直送'
    } else {
        return ''
    }
}
// 付款类型
function getClearForm(val: string) {
    if (val === '1') {
        return '现付'
    } else if (val === '2') {
        return '提付'
    } else if (val === '3') {
        return '签单'
    } else {
        return ''
    }
}
// 获取验证码
async function getVerify() {
    const obj = {
        phone: '17671874972',
        isFromSign: true, //6位
    }
    await getCodeNum(obj)
}



</script>
  
<style lang="scss">
* {
    margin: 0;
    padding: 0;
}

.checkinfo_contain {

    span,
    a {
        display: inline;
    }

    .nut-steps {
        background: transparent; // 如果背景是白色就不需要了，默认是白色的
        width: 80%;
        margin: 0 auto;
        overflow: visible; //如果不需要文字，或者不需要调整位置，可以不设置
        height: calc(135vw / 3.75);

        .step-item {
            position: relative;

            span {
                position: absolute;
                top: calc(20vw / 3.75);
                left: calc(-2vw / 3.75);
                z-index: 1;
                font-size: calc(14vw / 3.75);
                color: #999999;
                font-weight: normal;
                margin-top: calc(10vw / 3.75);
            }

            .title-active {
                // 自定义文字激活
                font-weight: bold;
                color: #fff;
                left: calc(-2vw / 3.75);
                font-size: calc(14vw / 3.75);
                font-weight: normal;
                margin-top: calc(10vw / 3.75);
            }

            .title-inactive {
                // 自定义文字激活并且完成
                color: #fff;
            }

            .title-finish {
                //自定义未激活
                color: #6BA3FF;
            }
        }


    }

    .header {
        padding-top: 36rpx;
        box-sizing: border-box;
        background-color: #0966FF;
        color: #000;
    }

    .title {
        width: calc(350vw / 3.75);
        height: calc(100vw / 3.75);
        padding: calc(18vw / 3.75) calc(12vw / 3.75);
        box-sizing: border-box;
        position: absolute;
        top: calc(100vw / 3.75);
        left: calc(12vw / 3.75);
        background-color: #fff;
        display: flex;
        border-radius: calc(8vw / 3.75);
        line-height: calc(18vw / 3.75);

        .image {
            width: calc(54vw / 3.75);
            height: calc(54vw / 3.75);
            margin-right: calc(12vw / 3.75);
        }

        .content {
            flex: 1;

            h3 {
                display: flex;
                justify-content: space-between;
                font-size: calc(16vw / 3.75);
                margin: 0;
                padding: 0;
            }

            p {
                font-size: calc(12vw / 3.75);
                color: #999999;
            }
        }
    }

    .order {
        width: calc(350vw / 3.75);
        height: calc(330vw / 3.75);
        margin-left: calc(12vw / 3.75);
        margin-top: calc(55vw / 3.75);
        overflow: auto;

        .order_herder {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #0966FF;
            height: calc(56vw / 3.75);
            padding: calc(12vw / 3.75) calc(20vw / 3.75) calc(8vw / 3.75) calc(12vw / 3.75);
            box-sizing: border-box;
            border-radius: calc(5vw / 3.75);

            .logo {
                width: 200rpx;
                height: calc(42vw / 3.75);
            }

            span {
                color: #fff;
                font-size: calc(14vw / 3.75);
                font-weight: 700;
                display: flex;
                align-items: center;

                image {
                    width: 28rpx;
                    height: 28rpx;
                }
            }
        }

        .order_body {
            padding: calc(8vw / 3.75);
            background-color: #fff;
            box-sizing: border-box;

            .scan {
                height: calc(120vw / 3.75);
                border: calc(1vw / 3.75) solid #E3E7EC;
                display: flex;
                align-items: center;

                image {
                    width: calc(175vw / 3.75);
                    height: calc(70vw / 3.75);
                    padding: calc(5vw / 3.75);
                    border-right: calc(1vw / 3.75) solid #E3E7EC;
                }

                .order_address {
                    padding: calc(12vw / 3.75) 0 0 calc(12vw / 3.75);
                    box-sizing: border-box;

                    h3 {
                        font-style: calc(16vw / 3.75);
                        line-height: calc(24vw / 3.75);
                        color: #000;
                    }

                    p {
                        font-size: calc(12vw / 3.75);
                        color: #999999;
                        line-height: calc(16vw / 3.75);
                    }
                }
            }

        }

        .order_userInfo {
            padding: calc(12vw / 3.75);
            border: calc(1vw / 3.75) solid #E3E7EC;
            border-top: 0;

            .send {
                display: flex;
                align-items: center;
            }

            .get {
                display: flex;
                align-items: center;
                margin-top: calc(12vw / 3.75);
            }

            image {
                width: calc(20vw / 3.75);
                height: calc(20vw / 3.75);
                padding-right: calc(8vw / 3.75);
            }

            h3 {
                font-size: calc(13vw / 3.75);

                span {
                    margin-right: calc(12vw / 3.75);
                }
            }

            p {
                margin-top: calc(4vw / 3.75);
                font-size: calc(11vw / 3.75);
                color: #999999;
            }
        }

        .order_spec {
            padding: calc(12vw / 3.75);
            height: calc(104vw / 3.75);
            border: calc(1vw / 3.75) solid #E3E7EC;
            border-top: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: flex-start;
            color: #999999;
            font-size: calc(11vw / 3.75);
            line-height: calc(14vw / 3.75);

            view {
                width: 100%;
                display: flex;

                span {
                    flex: 1;
                    color: #000;
                }

                p {

                    display: flex;
                    justify-content: space-between;
                    margin-right: calc(10vw / 3.75);
                }
            }
        }

        .service {
            padding: calc(12vw / 3.75);
            height: calc(108vw / 3.75);
            border: calc(1vw / 3.75) solid #E3E7EC;
            border-top: 0;
            color: #999999;
            font-size: calc(11vw / 3.75);

            span {
                color: #000;
            }

            p {
                line-height: calc(24vw / 3.75);
            }

            .service_info {
                padding: calc(6vw / 3.75);
                background-color: #F8F9FA;

                p {
                    display: flex;
                    justify-content: space-between;
                }

                .noflex {
                    display: flex;
                    justify-content: flex-start
                }
            }

            .flex {
                display: flex;
                justify-content: space-between;
            }
        }
    }

    .tips {
        width: calc(350vw / 3.75);
        height: calc(330vw / 3.75);
        margin-left: calc(12vw / 3.75);
        margin-top: calc(55vw / 3.75);
        overflow: auto;
        padding: calc(18vw / 3.75) calc(14vw / 3.75);
        box-sizing: border-box;
        background-color: #fff;
        color: #000;
        position: relative;

        .hand_img {
            width: 240rpx;
            height: 100%;
            transform: rotate(-90deg);
            position: absolute;
            top: 1150rpx;
            left: 240rpx;
        }

        h3 {
            text-align: center;
            font-size: calc(20vw / 3.75);
            font-weight: 700;
            margin-bottom: calc(12vw / 3.75);
        }

        p {
            font-size: calc(11vw / 3.75);
            // margin-bottom: calc(24vw / 3.75);
        }

        .agree {
            display: block;
            margin-top: calc(24vw / 3.75);
            font-size: calc(16vw / 3.75);
            font-weight: 700;
            color: #0966FF;
        }

        .sign {
            margin: calc(12vw / 3.75) auto;
            background: #f8f9fa;
            border: 1rpx dashed #c4c4c4;
            border-radius: 8rpx;
            height: 240rpx;
            width: 100%;
            box-sizing: border-box;
            color: #999999;
            font-size: calc(16vw / 3.75) auto;
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .message {
        // height: calc(170vw / 3.75);
        // width: calc(350vw / 3.75);
        // margin-left: calc(12vw / 3.75);
        margin-top: calc(55vw / 3.75);
        overflow: auto;
        padding: calc(18vw / 3.75) calc(14vw / 3.75);
        box-sizing: border-box;
        border-radius: calc(8vw / 3.75);
        background-color: #fff;
        text-align: center;

        .captcha {
            height: 116rpx;
            width: 640rpx;
            text-align: center;
            font-size: 64rpx;
            line-height: 96rpx;
            color: #0966FF;
            word-spacing: 70rpx;
            letter-spacing: 70rpx;
        }

        p {
            font-size: calc(13vw / 3.75);
            color: #999999;
            margin-bottom: calc(24vw / 3.75);
        }

        span {
            color: #000;
        }

        .error {
            margin-top: calc(12vw / 3.75);
            font-size: calc(13vw / 3.75);

            .sec {
                color: #0966ff;
            }
        }

        .err {
            color: #EA0000;
        }

    }

    .footer {
        padding: calc(10vw / 3.75) calc(12vw / 3.75);
        margin: 0;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;

        view {
            width: calc(172vw / 3.75);
            height: calc(36vw / 3.75);
            font-size: calc(14vw / 3.75);
            line-height: calc(36vw / 3.75);
            border-radius: calc(18vw / 3.75);
            border: calc(1vw / 3.75) solid #C4C4C4;
            text-align: center;
            color: #000;
        }

        .click {
            background-color: #0966FF;
            color: #fff;
        }

        .disabled {
            background-color: #767676;
        }
    }

    .nut-password-input__item {
        background-color: #F4F5F6;
        color: #0966FF;
    }

    .nut-password-input__item--focus {
        border: 1px solid #0966FF;
    }

    .over {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
            margin-top: calc(144vw / 3.75);
            height: calc(74vw / 3.75);
            width: calc(74vw / 3.75);
        }

        h3 {
            margin-top: calc(24vw / 3.75);
            font-size: calc(20vw / 3.75);
        }

        p {
            font-size: calc(14vw / 3.75);
            color: #999999;
            margin-top: calc(6vw / 3.75);
        }
    }

    .hand_write {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        background-color: #fff;
    }
}
</style>
  
  